<template>
  <div class="_wrap">
    <div class="_tit">本年</div>
    <div class="_inner">
      <div class="item" v-for="(item, i) in list" :key="i">
        <div class="_t">
          <div class="label">{{item.label}}</div>
          <div class="value"><span class="val">{{item.value}}</span><span class="unit">{{item.unit}}</span></div>
        </div>
        <div class="_b">
          <div class="_item" v-for="(e, index) in item.list" :key="index">
            <div class="label">{{e.label}}：</div>
            <div class="value"><span class="val">{{e.value}}</span><span class="unit">{{item.unit}}</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'itemCenterB1',
    components: {},
    data() {
      return {
        list: [
          {
            label: '装备采购项目数', value: 342, unit: '个',
            list: [
              { label: '统一采购', value: 124 },
              { label: '校自行采购', value: 188 }
            ]
          },
          {
            label: '基建项目数', value: 515, unit: '个',
            list: [
              { label: '零星项目', value: 121 },
              { label: '专项项目', value: 85 },
              { label: '前期实施', value: 163 },
              { label: '实施项目', value: 146 }
            ]
          },
          {
            label: '招聘教师数', value: 235, unit: '人',
            list: [
              { label: '正式编制', value: 182 },
              { label: '雇员制', value: 35 },
              { label: '临时工', value: 18 }
            ]
          },
        ]
      }
    },
    mounted() {
    },
    methods: {}
  }
</script>

<style scoped lang="scss">
  ._wrap {
    width: 100%; height: 212px;
    background: url('~@/assets/imgFinance/boxBg.svg') no-repeat;
    display: grid; grid-template-columns: 40px auto;
    ._tit {
      height: 100%; background: url('~@/assets/imgFinance/lableBg.svg') no-repeat; text-align: center;
      display: flex; align-items: center; justify-content: center;
      font-size: 22px; font-family: DingTalk; line-height: 64px;
    }
    ._inner {
      height: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; position: relative;
      .item {
        /*background: rgba(0,16,43,0.32); border: 1px solid rgba(8,132,255, .6); border-radius: 5px;*/
        overflow: hidden; padding: 15px; display: grid; grid-template-rows: 56px auto;
        ._t {
          display: flex; flex-direction: column; align-items: center; justify-content: center;
          .label { font-size: 18px; font-family: PingFangSC; letter-spacing: 0.83px; }
          .value {
            .val { font-size: 24px;  color: #00FFFA; font-family: DINPro; }
            .unit { font-size: 16px; font-family: PingFangSC; margin-left: 5px; }
          }
        }
        ._b {
          padding-top: 10px;
          display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
          ._item {
            width: 70%;
             display: flex; align-items: center; justify-content: space-between;
            .label {
              font-size: 16px; font-family: PingFangSC; color: #F1F1F1;
              display: flex; align-items: center; width: 120px;
              &:before {
                content: ''; display: block; width: 10px; height: 10px; margin-right: 9px;
                border: 1.4px solid rgba(0,255,255,1); transform: rotate(45deg);
              }
            }
            .value {
              display: flex; align-items: flex-end; justify-content: flex-end;
              .val { font-size: 20px; font-family: DINPro; }
              .unit { font-size: 16px; font-family: PingFangSC; margin-left: 5px; }
            }
            /*& + .item { border-left: 1px dotted rgba(0,255,255,1) }*/
          }
        }
      }
      &:before, &:after {
        content: ''; display: block; width: 0; border-right: 1px dotted rgba(0,255,255,1);
        position: absolute; top: 17px; bottom: 17px;
      }
      &:before { left: 33.33%; }
      &:after { right: 33.33%; }
    }
  }
</style>
